<template>
  <div class="mydetail">
    <el-button @click="toPrint">打印</el-button>
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="first">
          <el-form :model="myform" class="form" label-width="100px">
            <el-form-item label="姓名">
              <el-input v-model="myform.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="myform.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateData">更新</el-button>
              <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
            <userinfo></userinfo>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <jobinfo></jobinfo>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
//导入接口
import { getEmpoloyeesApi, setEmpoloyeesApi } from '@/api/employees'
export default {
  data () {
    return {
      //控制tabs栏的默认高亮
      activeName: 'first',
      //表单的数据源
      myform: {
        username: '', //用户信息
        password: '' //密码
      },
      id: this.$route.params.id,
      leftForm: {}, //个人详情中的左侧表单
      rightForm: {}
    }
  },
  methods: {
    //点击打印按钮跳转打印页
    toPrint(){
      //type 用来确定显示哪个结构(员工信息表 && 岗位信息表)
      const type = this.activeName === 'first' || this.activeName === 'second'?'info':'job'
      this.$router.push(`/employees/print/${this.id}?type=${type}`)
    },
    //点击更新按钮
    async updateData () {
      //直接发送请求到服务器，修改数据
      await setEmpoloyeesApi(this.myform)
      //跳转到员工首页
      this.$router.push('/employees')
    },
    //获取员工数据方法
    async getUsInfo () {
      //发送网络请求
      const res = await getEmpoloyeesApi(this.id)
      //绑定数据到表单中,渲染页面
      this.myform = { ...res.data }
    }
  },
  created () {
    //获取员工数据
    this.getUsInfo()
  },
  components:{
      userinfo:()=>import('@/views/employees/userinfo/index.vue'),
      jobinfo:()=>import('@/views/employees/jobinfo/index.vue')
  }
}
</script>

<style lang="scss" scoped>
.mydetail {
  margin: 20px;
  .form {
    margin: 100px auto;
    width: 50%;
  }
}
</style>
